<template>
  <div class="forgot-page">
    <div class="forgot-container">
      <h2>找回密码</h2>
      <el-form :model="forgotForm" :rules="forgotRules" ref="forgotFormRef" label-width="80px" class="forgot-form">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="forgotForm.username" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="新密码" prop="password">
          <el-input v-model="forgotForm.password" type="password" placeholder="请输入新密码" />
        </el-form-item>
        <el-form-item label="验证码" prop="captcha">
          <div class="captcha-row">
            <el-input v-model="forgotForm.captcha" placeholder="请输入验证码" style="width: 120px;" />
            <span class="captcha-img" @click="generateCaptcha">{{ captcha }}</span>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleReset">重置密码</el-button>
          <el-button type="text" @click="$router.push('/login')">返回登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ForgotPassword',
  data() {
    return {
      forgotForm: {
        username: '',
        password: '',
        captcha: ''
      },
      captcha: '',
      forgotRules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
        captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.generateCaptcha()
  },
  methods: {
    generateCaptcha() {
      this.captcha = Math.random().toString().slice(2, 6)
    },
    handleReset() {
      this.$refs.forgotFormRef.validate((valid) => {
        if (!valid) return
        if (this.forgotForm.captcha !== this.captcha) {
          this.$message.error('验证码错误')
          this.generateCaptcha()
          return
        }
        // 查找用户
        const userList = JSON.parse(localStorage.getItem('userList') || '[]')
        const user = userList.find(u => u.username === this.forgotForm.username)
        if (!user) {
          this.$message.error('用户名不存在')
          this.generateCaptcha()
          return
        }
        // 重置密码
        user.password = this.forgotForm.password
        localStorage.setItem('userList', JSON.stringify(userList))
        this.$message.success('密码重置成功，请登录')
        this.$router.push('/login')
      })
    }
  }
}
</script>

<style scoped>
.forgot-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.forgot-container {
  background: white;
  padding: 3rem 2.5rem 2rem 2.5rem;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  min-width: 350px;
}
.forgot-form {
  margin-top: 2rem;
}
.captcha-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.captcha-img {
  display: inline-block;
  background: #f5f5f5;
  color: #333;
  font-weight: bold;
  font-size: 1.2rem;
  padding: 0.5rem 1.2rem;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  border: 1px solid #dcdfe6;
  transition: background 0.2s;
}
.captcha-img:hover {
  background: #e0e7ff;
}
</style>
